import { useState } from "react";
import React from 'react';
import { useLiveQuery } from "dexie-react-hooks";
import { db } from "./db";
export default function FriendList({minAge, maxAge}) {
  const friends = useLiveQuery(
    async () => {
      //
      // Query Dexie's API
      //
      const friends = await db.friends
        .where('age')
        .between(minAge, maxAge)
        .toArray();

      // Return result
      return friends;
    },
    // specify vars that affect query:
    [minAge, maxAge] 
  );

  return <ul>
    {friends?.map(friend => <li key={friend.id}>
      {friend.name}, {friend.age}
    </li>)}
  </ul>;
}
// export function FriendList() {
//   const friends = useLiveQuery(
//     () => db.friends.toArray()
//   );

//   return <ul>
//     {friends?.map(friend => <li key={friend.id}>
//       {friend.name}, {friend.age}
//     </li>)}
//   </ul>;
// }